<template>
  <div class="homePage">
    <el-container>
      <el-header>
        <el-row >
            <span ><img src="../images/logo.png" height="50" width="200"/></span>
          <div class="header-right">
              <div class="header-user-con">
                <!-- 用户头像，根据需要自行修改图片路径 -->
                <el-image class="user-avator" :src="url">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ username }}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item disabled>修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu unique-opened router>
            <el-menu-item index="info" >
              <template slot="title"><i class="el-icon-user"></i>用户首页</template>
            </el-menu-item>
<!--教师用户-->
            <el-submenu index="1" v-if="type===1">
              <template slot="title"><i class="el-icon-message"></i>信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="management">学生信息</el-menu-item>
                <el-menu-item index="publishTask">任务发布</el-menu-item>
              </el-menu-item-group>
              </el-submenu>
            <el-submenu index="2" v-if="type===1">
              <template slot="title"><i class="el-icon-s-order"></i>过程管理</template>
              <el-menu-item-group>
                <el-menu-item index="markFile">批阅文件</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
<!--学生用户-->
            <el-submenu index="3" v-if="type===1">
              <template slot="title"><i class="el-icon-message"></i>信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="news">查看公告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4" v-if="type===1">
              <template slot="title"><i class="el-icon-upload2"></i>过程管理</template>
              <el-menu-item-group>
                <el-menu-item index="upload">上传文档</el-menu-item>
                <el-menu-item index="result">查看结果</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5" v-if="type===1">
              <template slot="title"><i class="el-icon-download"></i>文件管理</template>
              <el-menu-item-group>
                <el-menu-item index="file">导出文件</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

<!--管理员用户-->
            <el-submenu index="6" v-if="type===1">
              <template slot="title"><i class="el-icon-message"></i>信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="user">用户信息</el-menu-item>
                <el-menu-item index="class">班级管理</el-menu-item>
                <el-menu-item index="course">课程管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7" v-if="type===1">
              <template slot="title"><i class="el-icon-files"></i>文件管理</template>
              <el-menu-item-group>
                <el-menu-item index="file">文件类型管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="8" >
              <template slot="title"><i class="el-icon-setting"></i>个人设置</template>
              <el-menu-item-group>
                <el-menu-item index="settingI">修改信息</el-menu-item>
                <el-menu-item index="settingP">安全中心</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import global from "@/global";
export default {
  name: "Home.vue",
  data(){
    return{
      type:global.type,
      username:global.user,
      url:global.host,
    }
  }
}
</script>

<style scoped>
.homePage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.el-container {
  height: 100%;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #000000;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.header-right {
  float: right;
  padding-right: 50px;
}
.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-name {
  margin-left: 10px;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>
